<template>
  <view class="auditacion">
    <form class="form" @submit="saveAddSignAfter">
      <view class="form-item">
        <view class="label">
          意见留言
        </view>
        <view class="input">
          <textarea v-model="yjly" type="text" placeholder="请输入意见留言"/>
        </view>
      </view>

      <view class="float-button">
        <view class="button-group">
          <u-button @click="saveAddSignAfter" ripple formType="submit">加签完毕</u-button>
        </view>
      </view>
    </form>
  </view>
</template>

<script>
import FormItem from "../../components/form-item/form-item";
import UTag from "../../uview-ui/components/u-tag/u-tag";
import UButton from "../../uview-ui/components/u-button/u-button";
import { routeTo } from "../../utils/util";

export default {
  components: { UButton, UTag, FormItem },
  data() {
    return {
      taskId: '',
      stepId: '',
      stepNo: '',
      flowId: '',
      auditId: '',
      yjly: '',
    }
  },
  methods: {
    saveAddSignAfter: async function () {
      let auditValue = this.yjly;
      let that = this;

      uni.showLoading({
        title: '保存数据',
        mask: true,
      })
      uni.showNavigationBarLoading();
      let data = await this.api.saveAudit({
        taskId: this.taskId,
        auditOption: this.signvalue,
        auditValue: auditValue
      })
      uni.hideLoading();
      uni.hideNavigationBarLoading()


      if (data.code === 0) {
        if (data.data !== "") {
          uni.showModal({
            title: '提示',
            content: data.data,
            showCancel: false,
          })
        } else {
          uni.showLoading({
            title: '加签中',
            mask: true,
          })
          uni.showNavigationBarLoading();
          let res = await this.api.saveAddSignAfter({
            taskId: this.taskId,
            stepId: this.stepId,
            flowId: this.flowId,
            signvalue: this.signvalue
          })


          if (res.code === 0) {
            if (res.data === "") {
              uni.showToast({
                title: '任务办理成功!',
                duration: 2000,
              });
              setTimeout(function () {
                uni.navigateBack({
                  delta: 2,
                })
                uni.$emit('update', { payload: '刷新待办' })
              }, 2000)
            } else {
              uni.showModal({
                title: '提示',
                content: '保存审核动作异常!',
                showCancel: false,
              })
            }
          } else {
            uni.showModal({
              title: '提示',
              content: '加签失败!',
              showCancel: false
            })
          }
        }
      } else {
        uni.showModal({
          title: '提示',
          content: '保存审核动作异常!',
          showCancel: false,
          success: function (res) {

          }
        })
      }
    },
  },

  onLoad(options) {
    this.taskId = options.taskId;
    this.stepId = options.stepId;
    this.flowId = options.flowId;
    this.signvalue = options.signvalue;
  }
}
</script>

<style lang="less" scoped>
.auditacion {
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20rpx 0 120rpx;
  /* #ifdef H5 */
  min-height: calc(100vh - 88rpx);
  /* #endif */

  .form {
    padding: 0 0 calc(40rpx + env(safe-area-inset-bottom)) 0;

    .form-item {
      background: #FFFFFF;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .label {
        .require {
          color: red;
          margin-right: 3rpx;
        }
      }

      .input {
        margin-top: 20rpx;

        textarea {
          width: 100%;
        }
      }

      .tag-box {
        display: flex;
        flex-wrap: wrap;

        .u-tag {
          margin: 20rpx 20rpx 0 0;
          transition: background ease-in-out .2s;

          &.select {
            background: #2979ff;
            color: #FFF;
          }
        }
      }

    }

    .float-button {
      position: fixed;
      width: 100%;
      background-color: #FFF;
      padding: 20rpx 20rpx calc(20rpx + env(safe-area-inset-bottom)) 20rpx;
      bottom: 0;
      display: flex;
      z-index: 1;
      align-items: center;

      .button-group {
        display: flex;
        justify-content: center;
        flex: 1;
        align-content: center;
        margin: 20rpx;

        button {
          outline: none;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0;
          color: #FFFFFF;
          transition: .3s background-color ease-in-out;
          background-color: #0086FE;
          margin: 0;
          border: 2rpx solid transparent;
          line-height: 2.2;
          border-radius: 0;
          border-width: 2rpx;

          &::after {
            border: none;
          }

          &.reject {
            color: #0086FE;
            background-color: #FFFFFF;
            border-color: #0086FE;
          }

          &.isAddSign {
            color: #0086FE;
            background-color: #FFF;
            border-color: #0086FE;
          }


          &:active {
            background-color: rgba(0, 134, 254, 0.49);
          }
        }


        :last-child {
          border-top-right-radius: 200rpx;
          border-bottom-right-radius: 200rpx;
          border-left: 2rpx;
        }

        :first-child {
          border-top-left-radius: 200rpx;
          border-bottom-left-radius: 200rpx;
          border-right: 2rpx;
        }
      }

      .more-btton {
        display: flex;
        color: #333;
        flex-direction: column;
        margin-right: 20rpx;
        align-items: center;
        justify-content: center;

        .icon-gengduo {
          font-size: 36rpx;
          margin-bottom: 5rpx;
        }

        .text {
          font-size: 20rpx;
        }
      }

    }
  }
}
</style>
